<template>
	<view class="pa">
		<!-- 团队电子票 -->
		<view class="ticket" v-for="(item, index) in infolist" :key="index">
			<view class="singup_people">
				<view class="title" v-if="infolist.length == 1">报名人</view>
				<view class="title" v-else>
					<text>报名人{{ index + 1 }}</text>
				</view>
				<view class="people_info">
					<text>{{ item.name }} {{ item.phone }}</text>
					<view class="r" @tap="look(index)">
						<view v-if="item.checked" class="yyp">
							<image src="https://ykp-new.oss-cn-hangzhou.aliyuncs.com/client/mine/eticket_yyp.png" mode=""></image>
							<!-- <image src="https://ykp-new.oss-cn-hangzhou.aliyuncs.com/client/other/etick_ewm.png" mode=""></image> -->
						</view>
						<view v-else class="wyp">未验票</view>
						<!-- <view v-else class="dcy">待参与</view> -->
						<i :class="['icon', !item.status ? 'iconwyp' : '']">&#xe600;</i>
					</view>
				</view>
				<!-- 原 -->
				<view class="zero_l"></view>
				<view class=" zero_r "></view>
			</view>
			<!-- 二维码 -->
			<view class="erweima" v-if="item.flag">
				<text>{{ item.code }}</text>
				<!-- <image src="https://ykp-new.oss-cn-hangzhou.aliyuncs.com/client/01.jpeg" mode=""></image> -->
				<image :src="item.qr_code" mode=""></image>
				<!-- <view class="status">
					已验票
				</view> -->
				<view class="status_t">
					<text class="yy" v-if="item.checked">已验票</text>
					<!-- <text class="cy" v-else-if="item.status == 2" >待参与</text> -->
					<text class="nn" v-else>未验票</text>
				</view>
				<view class="save" id="ewm_pic" ref="certcover" @tap="downImg(item.qr_code)" v-if="version">
					<i class="icon">&#xe619;</i>
					保存电子票
				</view>
				<view class="save" id="ewm_pic" ref="certcover" v-else>长按二维码保存</view>
			</view>

			<view class="packup" @tap="look(index)">
				<view v-if="item.flag" class="packup_bo">
					收起
					<i class="icon">&#xe64a;</i>
				</view>
				<view v-else class="packup_bo">
					您有一张电子票，查看电子票
					<i class="icon">&#xe649;</i>
				</view>
			</view>
		</view>
		<!-- loading 遮罩层 -->
		<loading v-if="loadflag"></loading>
		<navigation></navigation>
	</view>
</template>

<script>
import QR from '@/static/js/qrcode.js';
import loading from '@/components/loading/loading.vue';
import navigation from '@/components/navigation/navigation.vue';
import { pathToBase64, base64ToPath } from '@/js_sdk/gsq-image-tools/image-tools';
export default {
	components: { loading, navigation },
	data() {
		return {
			loadflag: true,
			flag: false,
			infolist: [],
			order_id: '',
			tj_user: '',
			qr_code: '',
			width: '',
			height: '',
			version: ''
		};
	},
	onLoad(options) {
		this.order_id = options.id;
		this.version = uni.getSystemInfoSync().version;
	},
	mounted() {
		this.getuserInfo();
	},
	methods: {
		downImg(url) {
			 // console.log (url);
			base64ToPath(url)
				.then(path => {
					 // console.log (path);
					uni.saveImageToPhotosAlbum({
						filePath: path,
						success: function() {
							 // console.log (1);
							 // console.log ('save success');
						}
					});
				})
				.catch(error => {
					console.error(error);
				});
		},
	
		look(key) {
			this.infolist[key].flag = !this.infolist[key].flag;
		},
		getuserInfo() {
			this.ajax('order/orderUser', {
				data: {
					order_id: this.order_id
				},
				success: res => {
					res.msg.forEach(item => {
						item.flag = false;
					});
					this.infolist = res.msg;
					res.msg.forEach(item => {
						item.qr_code = QR.createQrCodeImg(item.code, {
							size: parseInt(240) //二维码大小
						});
						item.form.forEach(items => {
							if (items.name == '姓名') {
								item.name = items.value;
							} else if (items.name == '手机号') {
								item.phone = items.value;
							}
						});
						 // console.log (res.msg);
					});
					this.tj_user = res.msg.code;
					this.loadflag = false;
				}
			});
		}
	}
};
</script>

<style lang="less" scoped>
.pa {
	padding: 30upx;
	box-sizing: border-box;
}
.ticket {
	width: 100%;
	background-color: #ffffff;
	border-radius: 10upx;
	overflow: hidden;
	margin-bottom: 20upx;
	.singup_people {
		width: 100%;
		height: 158upx;
		border-bottom: 2upx dashed #e1e1e1;
		position: relative;
		.title {
			width: 120upx;
			height: 44upx;
			background-color: #9e53e3;
			border-top-right-radius: 22upx;
			border-bottom-right-radius: 22upx;
			margin-top: 16upx;
			font-size: 24upx;
			color: #ffffff;
			text-align: center;
			line-height: 44upx;
		}
		.people_info {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 30upx;
			text {
				font-size: 28upx;
				color: #333333;
			}
			.r {
				display: flex;
				align-items: center;
				margin-right: 20upx;
				position: relative;
				.wyp {
					font-size: 24upx;
					color: #999;
				}
				.icon {
					margin-left: 20upx;
					color: #8530e8;
				}
				.iconwyp {
					color: #999999;
				}
				.dcy {
					color: #8530e8;
				}
				.yyp {
					position: absolute;
					right: -20upx;
					top: -120upx;
					width: 194upx;
					height: 158upx;
					image {
						width: 194upx;
						height: 158upx;
					}
				}
			}
		}
		.zero_l {
			position: absolute;
			width: 22upx;
			height: 22upx;
			border-radius: 50%;
			background-color: #f2f2f2;
			bottom: 0;
			left: 0;
			transform: translate(-50%, 50%);
		}
		.zero_r {
			position: absolute;
			width: 22upx;
			height: 22upx;
			border-radius: 50%;
			background-color: #f2f2f2;
			bottom: 0;
			right: 0;
			transform: translate(50%, 50%);
		}
	}
	.erweima {
		width: 100%;
		border-bottom: 2upx dashed #e1e1e1;
		text-align: center;
		text {
			font-size: 24upx;
			color: #000000;
		}
		image {
			display: block;
			margin: 20upx auto;
			margin-top: 15upx;
			width: 275upx;
			height: 275upx;
		}
		.status {
			font-size: 24upx;
			color: #0caf42;
		}
		.status_t {
			font-size: 24upx;
			.yy {
				color: #0cb046;
			}
			.nn {
				color: #999;
			}
			.cy {
				color: #8530e8;
			}
		}
	}
	.save {
		height: 90upx;
		font-size: 24upx;
		line-height: 32upx;
		color: #333333;
		display: flex;
		align-items: center;
		justify-content: center;
		.icon {
			font-size: 28upx;
			color: #999999;
			height: 40upx;
			margin-right: 6upx;
		}
	}
}
.packup {
	width: 100%;
	height: 70upx;
	line-height: 70upx;
	font-size: 24upx;
	color: #666666;
	display: flex;
	align-items: center;
	justify-content: center;
	.icon {
		font-size: 28upx;
		margin-left: 10upx;
	}
}
</style>
<style>
page {
	background-color: #f2f2f2;
}
</style>
